/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useCallback, forwardRef, useEffect, useState } from "react";
import { Select } from "antd";
import { connect } from "dva";

const { Option } = Select;

const BrandsSelect = forwardRef((props, ref) => {
  const { loading, value, onSelect, userBrands, dispatch, ...restProps } = props;

  const [brandsList, setBrandsList] = useState([]);

  const filterOption = useCallback(
    (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
    []
  );

  useEffect(
    () => {
      dispatch({
        type: "orderDetails/getBrands",
      }).then(res => {
        setBrandsList(res);
      });
    },
    [dispatch]
  );

  const handleSelect = useCallback(
    options => {
      onSelect && onSelect(options);
    },
    [onSelect]
  );

  return (
    <Select
      ref={ref}
      style={{ width: 250 }}
      placeholder="请选择品牌"
      showSearch
      filterOption={filterOption}
      value={value}
      onSelect={handleSelect}
      {...restProps}
    >
      {brandsList.map(({ brand, short_name }) => (
        <Option key={brand} value={brand}>
          {short_name}
        </Option>
      ))}
    </Select>
  );
});

export default connect(
  null,
  null,
  null,
  { forwardRef: true }
)(React.memo(BrandsSelect));
